// 新增项目页面
<template>
  <div class="project-edit-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>

      <el-form-item label="项目地址" prop="StorageAddress">
        <el-input
          v-model="form.StorageAddress"
          placeholder="请输入项目仓库地址"
        ></el-input>
      </el-form-item>

      <el-form-item label="项目状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择项目状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始日期" prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="date"
          placeholder="选择开始日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束日期" prop="endDate">
        <el-date-picker
          v-model="form.endDate"
          type="date"
          placeholder="选择结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="项目描述" prop="description">
        <el-input
          type="textarea"
          :rows="5"
          v-model="form.description"
          placeholder="请输入项目描述"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ProjectEdit",
  data() {
    return {
      isEdit: false,
      statusOptions: [
        { value: "进行中", label: "进行中" },
        { value: "已完成", label: "已完成" },
        { value: "已暂停", label: "已暂停" },
        { value: "已取消", label: "已取消" },
      ],
      form: {
        id: null,
        name: "",
        StorageAddress: "",
        status: "",
        startDate: "",
        endDate: "",
        description: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "请选择项目状态", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
      },
    };
  },
  created() {
    if (this.$route.params.id) {
      this.isEdit = true;
      // 这里应该调用API获取项目详情
      this.form = {
        id: this.$route.params.id,
        name: this.$route.params.name,
        StorageAddress: this.$route.params.StorageAddress,
        status: this.$route.params.status,
        startDate: this.$route.params.startDate,
        endDate: this.$route.params.endDate,
        description: this.$route.params.description,
      };
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        const name = this.form.name;
        const description = this.form.description;
        const StorageAddress = this.form.StorageAddress;
        const status = this.form.status;
        const startDate = this.form.startDate;
        const endDate = this.form.endDate;
        if (valid) {
          if (this.isEdit) {
            // 更新处理
            // /UpdataProject
            axios
              .patch(
                `http://127.0.0.1:3000/api/UpdataProject/${this.form.id}`,
                {
                  name,
                  description,
                  StorageAddress,
                  status,
                  startDate,
                  endDate,
                }
              )
              .then(() => {
                this.$message.success("文章更新成功");
              })
              .catch(() => {
                this.$message.error("文章更新失败：");
              });
          } else {
            // 创建处理
            // AddProject
            axios
              .post("http://127.0.0.1:3000/api/AddProject", {
                name,
                description,
                StorageAddress,
                status,
                startDate,
                endDate,
              }) // 传递表单内容
              .then(() => {
                this.$message.success("笔记创建成功");
              })
              .catch(() => {
                this.$message.error("笔记创建失败");
              });
          }
          this.$router.push("/projects");
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.project-edit-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-select,
.el-date-editor {
  width: 100%;
}
</style>
